<!--加载完执行：工具箱-->
<template>
  <span class="mc-mounted"><slot></slot></span>
</template>

<script>
export default {
  name: 'mc-mounted',
  data () {
    return {

    }
  },
  //暂时预定10个参数 大部分用户2-3个就够了
  props: {
    //修改html节点的字体大小比例：0表示禁用
    changeHtmlFontSizeRatio:{type:Number,default:0}
  }
  ,
  beforeCreate () {
    var vdata = window['MC']?window.MC.vdata:window.vueData;
    this.$emit("mc-mounted",vdata);
  },
  mounted(){
    if(this.changeHtmlFontSizeRatio>0){
        this.changeHtmlFontSize();
        window.addEventListener('resize', this.changeHtmlFontSize, true); // 必须为true 不然销毁事件不生效 resize事件 监听窗口的大小来触发事件
    }
  },
  methods:{
    //修改html的字体大小
    changeHtmlFontSize(e){
      var wh = document.documentElement.offsetWidth; //获取元素的高度
      document.documentElement.style.fontSize = (wh / this.changeHtmlFontSizeRatio) + 'px'; // 1206为设计稿高度   改变font-size的大小
    }
  },
  destroyed(){
    if(this.changeHtmlFontSizeRatio>0){
      window.removeEventListener('resize',this.changeHtmlFontSize,true);
    }
  }
}
</script>

<style lang="scss">
    .mc-mounted{
        display:none;
    }
    .magicalcoder-dragging .mc-mounted{
        display:inline-block;
        font-size: 20px;
        color: red;
    }
</style>
